<template>
    <div class="workbench-container">
        <button @click="isDark = !isDark">切换主题</button>


        <m-form-upload />
        <div class="a">肖梓淇</div>
    </div>
</template>

<script setup lang="ts">
import { useDark } from '@vueuse/core'
const isDark = useDark()


</script>


<style>
.a{
    width: 100px;
    height: 100px;
    display: flex;
    border-radius: 10px;
    background-color: orange;
    font-size: 20px;
    font-weight: bold;
    color: red;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    animation: rightMove 1s linear infinite;
}

.a:hover{
    animation: a 1s linear infinite;
}
@keyframes a {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(1);
        background-color: red;
        color: green;
    }
}

/* 移动 */

@keyframes rightMove {
    0%{
        transform: translateX(0);
        background-color: red;
        color: green;
    }
    25%{
        transform: translateY(100%);
        background-color: blue;
        color: red;
    }
    50%{
        transform: translateX(100%);
        background-color: blue;
        color: green;
    }
    100%{
        transform: translateY(50%);
        background-color: red;
        color: white;
    }
}
</style>